<template>
  <view v-if="isLogined" class="container">
    <!-- 个人信息部分 -->
    <view class="profile-section" @click="toEditInfo">
      <image
        class="profile-avatar"
        @click="toEditInfo"
        :src="
          userInfo.avatar ||
          'https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/default-avatar.png'
        "
      />
      <view class="profile-info">
        <text class="profile-name">{{ userInfo.nickname || '默认用户' }}</text>
        <text class="profile-email">邮箱: {{ userInfo.email || '未绑定' }}</text>
        <text class="profile-phone">电话: {{ userInfo.cellphone || '未绑定' }}</text>
      </view>
      <view class="profile-edit">
        <image class="right-icon" src="../../static/icons/right_w.png"></image>
      </view>
    </view>

    <!-- 收藏与历史记录 -->
    <view class="actions-section">
      <view class="action-item" @click="goToCollection">
        <image class="action-icon" src="../../static/icons/star.png"></image>
        <text class="action-title">我的收藏</text>
      </view>
      <view class="action-item" @click="goToHistory">
        <image class="action-icon" src="../../static/icons/history.png"></image>
        <text class="action-title">历史记录</text>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu">
        <view class="menu-item" @click="goToNotifications">
          <image class="menu-icon" src="../../static/icons/message.png"></image>
          <text class="menu-title">消息通知</text>
          <image class="icon-arrow" src="../../static/icons/right.png"></image>
        </view>
        <view class="menu-item" @click="goToFollow">
          <image class="menu-icon" src="../../static/icons/accounts.png"></image>
          <text class="menu-title">关注公众号</text>
          <image class="icon-arrow" src="../../static/icons/right.png"></image>
        </view>
        <view class="menu-item" @click="goToContact">
          <image class="menu-icon" src="../../static/icons/phone.png"></image>
          <text class="menu-title">联系方式</text>
          <image class="icon-arrow" src="../../static/icons/right.png"></image>
        </view>
        <view class="menu-item" @click="goToSettings">
          <image class="menu-icon" src="../../static/icons/settings.png"></image>
          <text class="menu-title">系统设置</text>
          <image class="icon-arrow" src="../../static/icons/right.png"></image>
        </view>
        <view class="menu-item" @click="logout">
          <image class="menu-icon" src="../../static/icons/logout.png"></image>
          <text class="menu-title">退出登录</text>
          <image class="icon-arrow" src="../../static/icons/right.png"></image>
        </view>
      </view>
    </view>
  </view>

  <view v-else class="container2">
    <view class="login-container">
      <text class="login-text">请先登录...</text>
      <button class="login-button mt-8" @click="toLogin">前往登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'

// 获取用户信息
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLogined = computed(() => userStore.isLogined)

// 退出账号
function logout() {
  uni.showModal({
    title: '提示',
    content: '确认退出登录？',
    success: function (res) {
      if (res.confirm) {
        userStore.clearUserInfo()
        console.log('用户点击确定')
        uni.switchTab({
          url: '/pages/index/index',
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}

const toEditInfo = () => {
  uni.navigateTo({
    url: '/pages/my/userinfo',
  })
}

const toLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}

const goToCollection = () => {
  uni.showToast({
    title: '正在完善',
    icon: 'none',
  })
}

const goToHistory = () => {
  uni.showToast({
    title: '正在完善',
    icon: 'none',
  })
}

const goToNotifications = () => {
  uni.showToast({
    title: '正在完善',
    icon: 'none',
  })
}

const goToFollow = () => {
  uni.showModal({
    title: '关注公众号',
    content: '关注“长沙人工智能创新中心”',
  })
}

const goToContact = () => {
  uni.showModal({
    title: '联系方式',
    content: '15116228720',
  })
}

const goToSettings = () => {
  uni.showToast({
    title: '正在完善',
    icon: 'none',
  })
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #1e90ff;
  height: 100vh;
}
.container2 {
  background: linear-gradient(180deg, rgba(215, 229, 247, 1) 0%, rgba(217, 234, 251, 0) 100%);
  height: 100vh;
  padding: 20px;
}
.profile-section {
  height: 25%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  color: #fff;

  .profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 15px;
  }

  .profile-info {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .profile-name {
      font-size: 18px;
      font-weight: bold;
    }

    .profile-email,
    .profile-phone {
      font-size: 14px;
      margin-top: 5px;
    }
  }
  .profile-edit {
    width: 20px;
    height: 70px;
    display: flex;
    align-items: center;
    .right-icon {
      width: 20px;
      height: 20px;
    }
  }
}

.actions-section {
  height: 15%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px;

  .action-item {
    display: flex;
    width: 47%;
    justify-content: center;
    background-color: #fff;
    border-radius: 12px;
    align-items: center;
    font-size: 16px;
    color: #333;
    padding: 10px 0;

    .action-icon {
      width: 35px;
      height: 35px;
      margin-right: 10px;
    }
    .action-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.menu {
  width: 90%;
  background-color: #fff;
  border-radius: 12px;
  margin-top: 20px;
  height: fit-content;
}

.menu-list {
  display: flex;
  justify-content: center;
  margin-top: -10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 60%;
  margin-top: 10px;
  background-color: #f4f7fa;
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;

    .menu-title {
      width: 80%;
      font-size: 14px;
    }

    .menu-icon {
      height: 25px;
      width: 25px;
      margin-right: 10px;
    }

    .icon-arrow {
      height: 15px;
      width: 15px;
    }
  }
}
.login-container {
  margin: 200px auto;
  text-align: center;

  .login-text {
    font-size: 17px;
  }
  .login-button {
    width: 80%;
    background-color: #0075fe;
    border-radius: 12px;
    color: #eee;
    margin-top: 100px;
  }
}
</style>
